﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="../../js/layui/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../js/layui/css/global.css" media="all">
    <link rel="stylesheet" href="../../js/layui/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/layui/css/table.css"/>
</head>
<body>
<div class="admin-main">
    <div>
        <blockquote class="layui-elem-quote">
            <form class="layui-form" style="float:left;">
                <div class="layui-form-item" style="margin:0;">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="padding:0;">
                        <button id="search" lay-filter="search" class="layui-btn layui-btn-small" lay-submit><i
                                class="fa fa-search"
                                aria-hidden="true"></i>
                            查询
                        </button>
                        <a href="javascript:;" class="layui-btn layui-btn-small" id="add">
                            <i class="layui-icon">&#xe608;</i> 添加信息
                        </a>

                    </div>
                </div>
            </form>
        </blockquote>
    </div>
    <div>
        <fieldset class="layui-elem-field">
            <legend>数据列表</legend>
            <div class="layui-field-box layui-form">
                <table class="layui-table admin-table">
                    <thead>
                    <tr>
                        <!--<th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary">-->
                        <!--</th>-->
                        <th class="text-left">线路名称</th>
                        <th class="text-left">起点省</th>
                        <th class="text-left">起点区域</th>
                        <th class="text-left">终点省</th>
                        <th class="text-left">终点区域</th>
                        <th class="text-center">运价</th>
                        <th class="text-center">生效日期</th>
                        <th class="text-center">失效日期</th>
                        <th class="text-center">操作</th>

                    </tr>
                    </thead>
                    <tbody id="content">

                    <#if list?exists>
                        <#list list as item>
                            <tr>
                                <!--<td><input type="checkbox" name="" lay-skin="primary"></td>-->
                                <td class="text-center">${item.routeName}</td>
                                <td class="text-center">${item.oProvinceName}</td>
                                <td class="text-center">${item.oTag}</td>
                                <td class="text-center">${item.dProvinceName}</td>
                                <td class="text-center">${item.dTag}</td>
                                <td class="text-center">${item.currentValue}</td>
                                <td class="text-center">${item.effectiveDate?string("yyyy-MM-dd")}</td>
                                <td class="text-center">${item.effectiveDate?string("yyyy-MM-dd")}</td>
                                <td><a href="javascript:;" data-id="${item.id}" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
                                    <!--<button id="update" onclick="javascript:update(${item.id});" class="layui-btn layui-btn-mini">编辑</button>-->
                                    <button  onclick="javascript:deleterecord(${item.id});" class="layui-btn layui-btn-danger layui-btn-mini">删除</button>
                                </td>
                            </tr>
                        </#list>
                    </#if>
                    </tbody>
                </table>
            </div>
        </fieldset>
        <div class="admin-table-page">
            <div id="paged" class="page">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../js/layui/plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../js/layui/js/paging.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery-form.js"></script>
<script>
    //删除
    function deleterecord(id){
        var parm = {'id':id};
        $.ajax({
            type: "Post",
            url: "delete",
            data:  parm,
            success: function (data) {
                //返回的数据用data.d获取内容
//                    alert(data.d);
            },
            error: function (err) {
//                        alert(err);
            }
        });
    }


    layui.use('layer', function () {
        var $ = layui.jquery,
            layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
            layer = layui.layer;


        //绑定所有编辑按钮事件
        $('#content').children('tr').each(function() {
            var $that = $(this);
            $that.children('td:last-child').children('a[data-opt=edit]').on('click', function() {
                var parm = {'id':$(this).data('id')};
                $.get('edit', parm, function (form) {
                    addBoxIndex = layer.open({
                        type: 1,
                        title: '修改表单',
                        content: form,
                        btn: ['保存', '取消'],
                        shade: false,
                        offset: ['100px', '30%'],
                        area: ['600px', '400px'],
                        zIndex: 19950924,
                        maxmin: true,
                        yes: function (index) {
                            //触发表单的提交事件
                             $('form.layui-form').find('button[lay-filter=edit]').click();
                            $.ajax({
                                type: "Post",
                                url: "update",
                                data:$('#editForm').serialize(),
                                success: function (data) {
                                    //返回的数据用data.d获取内容
//                    alrt(data.d);
                                },
                                error: function (err) {
//                        alert(err);
                                }
                            });
                        },
                        success: function (layero, index) {

                        },
                        end: function () {
                            addBoxIndex = -1;
                        }
                    });
                });

            });

        });

        var addBoxIndex = -1;
        $('#add').on('click', function () {
            if (addBoxIndex !== -1)
                return;
            //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
            $.get('edit', null, function (form) {
                addBoxIndex = layer.open({
                    type: 1,
                    title: '添加表单',
                    content: form,
                    btn: ['保存', '取消'],
                    shade: false,
                    offset: ['100px', '30%'],
                    area: ['600px', '400px'],
                    zIndex: 19950924,
                    maxmin: true,
                    yes: function (index) {
                        //触发表单的提交事件
                        $('form.layui-form').find('button[lay-filter=edit]').click();
                    },
                    full: function (elem) {
//                        var win = window.top === window.self ? window : parent.window;
//                        $(win).on('resize', function() {
//                            var $this = $(this);
//                            elem.width($this.width()).height($this.height()).css({
//                                top: 0,
//                                left: 0
//                            });
//                            elem.children('div.layui-layer-content').height($this.height() - 95);
//                        });
                    },
                    success: function (layero, index) {
//                        //弹出窗口成功后渲染表单
//                        var form = layui.form();
//                        form.render();
//                        form.on('submit(edit)', function(data) {
//                            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
//                            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
//                            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//                            //调用父窗口的layer对象
//                            layerTips.open({
//                                title: '这里面是表单的信息',
//                                type: 1,
//                                content: JSON.stringify(data.field),
//                                area: ['500px', '300px'],
//                                btn: ['关闭并刷新', '关闭'],
//                                yes: function(index, layero) {
//                                    layerTips.msg('你点击了关闭并刷新');
//                                    layerTips.close(index);
//                                    location.reload(); //刷新
//                                }
//
//                            });
//                            //这里可以写ajax方法提交表单
//                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
//                        });
                        //console.log(layero, index);
                    },
                    end: function () {
                        addBoxIndex = -1;
                    }
                });
            });
        });
        $('#search').on('click', function () {
            parent.layer.alert('你点击了搜索按钮')
        });

    });
</script>
</body>

</html>